
<template>
    <table class="table form-inline">
        <tbody>
            <tr>
                <td>
                    门店名称:<input type="text" v-model="form.hotelName" class="form-control">
                    &nbsp;&nbsp;
                    商户地址:<select v-model="form.pId" class="form-control">
                        <opton :value="0">请选择</opton>
                        <option v-for="item in provinceList":key="item.pId":value="item.pId">{{ item.pName }}</option>
                    </select>
                    <button class="btn btn-primary">查询</button>
                    <button class="btn btn-primary" @click="router.push('/hotelAdd')">添加</button>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table table-bordered text-center">
        <tbody>
            <tr class="bg-primary">
                <td>门店名称</td>
                <td>分店名称</td>
                <td>商户地址</td>
                <td>门店图片</td>
                <td>联系电话</td>
                <td>状态</td>
                <td>开业日期</td>
                <td>门店介绍</td>
                <td>入住须知</td>
                <td>交通信息</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in hotelList">
                <td>{{ item.hotelName }}</td>
                <td>{{ item.subName }}</td>
                <td>{{ item.pId }}</td>
                <td>
                    <img :src="item.pic" style="max-width: 100px;max-height: 100px;">
                    
                </td>
                <td>{{ item.phone }}</td>
                <td>
                    <span style="color: red;" v-if="item.state">启用</span>
                    <span style="color: blue;" v-if="item.state">禁用</span>
                </td>
                <td>{{ item.createTime}}</td>
                <td>{{ item.desc }}</td>
                <td>{{ item.remark }}</td>
                <td>{{ item.traffic }}</td>
                <td>
                    <a href="javascript:void(0)">修改</a>
                    <a href="javascript:void(0)" style="color: red;">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
// 引入组件
import { ref, reactive, onMounted } from "vue"
import axios from "axios"

import "bootstrap/dist/css/bootstrap.min.css"
import { useRouter } from "vue-router"
//系统路由
const router = useRouter();

//查询条件
// 门店信息
const form = reactive({
    hotelName: "",
    pId: 0
 
})

// 商户列表（查询条件的下拉列表）
const provinceList = ref([])


// 返回商户列表
const getProvinceList = () => {
    axios.get("http://localhost:1338/api/Hotel/GetProvinceList").then(res => {
        provinceList.value = res.data;
    })
}


// 门店列表
const hotelList = ref([])
//获取会员列表
const getHotelList = () => {
    axios.get("http://localhost:1338/api/Hotel/GetHotels").then(res => {
        hotelList.value = res.data;

    })
}
//钩子函数
onMounted(() => {
    getHotelList();
    getProvinceList();
})
</script>